<template>
  <div class="newsContainer">
    <el-card class="card-header">
      <div slot="header" class="clearfix">
        <div class="news_tit">
          <span>打标审核</span>
        </div>
      </div>
      <div class="search">
        <el-row :gutter="20" type="flex">

          <el-col :span="8">
            <span class="label">日期筛选</span>
            <el-date-picker
              v-model="datetimerange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              clearable
              unlink-panels
              @change="newsSearch"
            />
          </el-col>
          <el-col :span="4">
            <el-select v-model="newsParams.platform_name" placeholder="来源筛选" @clear="getCheckResult" @change="getCheckResult">
              <el-option
                v-for="item in platformOPtions"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select v-model="newsParams.model_name" placeholder="模型筛选" @clear="getCheckResult" @change="handleNews">
              <el-option
                v-for="item in modelOptions"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select v-model="result" placeholder="结果筛选" @change="selectCheckResult">
              <el-option
                v-for="item in checkResult"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>

        </el-row>
      </div>
    </el-card>
    <el-card class="card_body">
      <div class="content">
        <ul class="news">
          <li v-for="(item,index) in newsData.data" :key="item.id" class="item">
            <div class="news_head">
              <div class="data_from">
                <span>{{ index+1 }}、数据来源 : </span>
                <span>{{ item.platform_name }}</span>
              </div>
<!--              <div class="model_from">-->
<!--                <span>模型来源 : </span>-->
<!--                <span>{{ item.model_name }}</span>-->
<!--              </div>-->
<!--              <div class="mark_people">-->
<!--                <span>标注人员 : </span>-->
<!--                <span>{{ item.username }}</span>-->
<!--              </div>-->
              <div v-if="item.model_name=='重要新闻'||item.model_name=='广告识别'" class="mark_result">
                <span>用户标注结果 ： </span>
                <span v-if="item.tag=='1'" style="background-color:#1E69F3;">有效</span>
                <span v-if="item.tag=='0'" style="background-color:#F95353;">无效</span>
              </div>
              <div v-if="item.model_name=='情感分析'" class="mark_result">
                <span>用户标注结果 ： </span>
                <span v-if="item.tag=='1'" style="background-color:#1E69F3;">积极</span>
                <span v-if="item.tag=='0'" style="background-color:#F95353;">消极</span>
                <span v-if="item.tag=='2'" style="background-color:#858585">中性</span>
              </div>
              <div v-if="item.model_name=='新闻正负面'" class="mark_result">
                <span>用户标注结果 ： </span>
                <span v-if="item.tag=='1' " style="background-color:#1E69F3;">正向</span>
                <span v-if="item.tag=='0'" style="background-color:#F95353;">负向</span>
                <span v-if="item.tag=='2'" style="background-color:#858585">中性</span>
              </div>
              <div v-if="item.model_name=='重要新闻'||item.model_name=='广告识别'" class="check_result">
                <span>管理员标注结果 : </span>
                <span v-if="item.veryfy=='1'" style="background-color:#1E69F3;">有效</span>
                <span v-if="item.veryfy=='0'" style="background-color:#F95353;">无效</span>
                <span v-if="item.veryfy==null" style="background-color:#25CE22;">待标注</span>
              </div>
              <div v-if="item.model_name=='情感分析'" class="check_result">
                <span>管理员标注结果 ： </span>
                <span v-if="item.veryfy=='1'" style="background-color:#1E69F3;">积极</span>
                <span v-if="item.veryfy=='0'" style="background-color:#F95353;">消极</span>
                <span v-if="item.veryfy=='2'" style="background-color:#858585">中性</span>
                <span v-if="item.veryfy==null" style="background-color:#25CE22;">待标注</span>
              </div>
              <div v-if="item.model_name=='新闻正负面'" class="check_result">
                <span>管理员标注结果 ： </span>
                <span v-if="item.veryfy=='1' " style="background-color:#1E69F3;">正向</span>
                <span v-if="item.veryfy=='0'" style="background-color:#F95353;">负向</span>
                <span v-if="item.veryfy=='2'" style="background-color:#858585">中性</span>
                <span v-if="item.veryfy==null" style="background-color:#25CE22;">待标注</span>
              </div>
              <div  class="mark_result">
                <span>审核结果 ： </span>
                <span v-if="item.is_audit=='0'" style="background-color:grey;">未审核</span>
                <span v-if="item.is_audit=='1'" style="background-color:green;">通过</span>
                <span v-if="item.is_audit=='2'" style="background-color:darkred">未通过</span>
              </div>
            </div>
            <div class="news_txt">
              <a v-if="item.url" :href="item.url" target="_blank">
                <p>{{ item.content }}</p>
              </a>
              <a v-else href="#">
                <p>{{ item.content }}</p>
              </a>
            </div>

          </li>
        </ul>
      </div>
      <div class="page">
        <el-pagination
          background
          :current-page="newsParams.page"
          :page-sizes="[10, 15, 20, 30]"
          :page-size="newsParams.row"
          layout="total, sizes, prev, pager, next, jumper"
          :total="newsData.totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

  </div>
</template>

<script>
import { filterModel } from '@/api/news'
import { getCheckResult } from '@/api/audit'
export default {
  data() {
    return {
      result:'',
      checkResult:[
        {
          value:0,
          label:'未审核'
        },
        {
          value:1,
          label:'审核通过'
        },
        {
          value:2,
          label:'审核未通过'
        },
      ],
      datetimerange: '',
      newsData: [],
      platformOPtions: [],
      newsParams: {
        audit_screen:'',
        platform_name: '',
        model_name: '1',
        pre_time: '',
        post_time: '',
        page: 1,
        row: 10,
        active_user: window.localStorage.getItem('u_name')
      },
      modelOptions: [
        {
          value: '1',
          name: '重要新闻'
        },
        {
          value: '2',
          name: '情感分析'
        },
        {
          value: '3',
          name: '广告识别'
        },
        {
          value: '4',
          name: '新闻正负面'
        }
      ]
    }
  },
  created() {
    this.getPlatform()
  },

  methods: {
    async selectCheckResult(){
      this.newsParams.audit_screen=this.result
      this.getCheckResult()
    },


    // 获取平台
    async getPlatform() {
      const res = await filterModel(this.newsParams.model_name)
      this.platformOPtions = res.data
      this.newsParams.platform_name = this.platformOPtions[0]
      this.getCheckResult()
    },
    // 获取新闻列表
    async getCheckResult() {
      console.log(this.newsParams,123123123)
      const res = await getCheckResult(this.newsParams)
      console.log(res,1212)
      if (res.code !== 2000) {
        this.$message.error(res.msg)
      }
      this.newsData = res.data
    },

    handleNews(val) {
      this.newsParams.model_name = val
      this.getPlatform()
    },

    newsSearch() {
      if (!this.datetimerange) {
        this.newsParams.pre_time = ''
        this.newsParams.post_time = ''
        this.getCheckResult()
        this.selectCheckResult()
      } else {
        this.newsParams.pre_time = this.datetimerange[0]
        this.newsParams.post_time = this.datetimerange[1]
        this.getCheckResult()
        this.selectCheckResult()
      }
    },
    handleSizeChange(newSize) {
      this.newsParams.row = newSize
      this.getCheckResult()
    },
    handleCurrentChange(newPage) {
      this.newsParams.page = newPage
      this.getCheckResult()
    }

  }
}
</script>

<style lang="scss" >

.search .el-col{
  display: flex;
  .label{
    display: inline-block;
    width: 130px;
    align-self: center;
  }
}

.card_body{
  margin-top: 20px;
}
.title{
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}

.el-card{
  border: none;
}
.el-card.is-always-shadow, .el-card.is-hover-shadow:focus, .el-card.is-hover-shadow:hover {
  box-shadow: none;
}

.news {
  padding: 0;
  margin-top: 0;
  .item{
    line-height: 30px;
    border-bottom: 1px dotted #000;
    .news_head{
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        .mark_result,.check_result{
            span{
                &:last-child{
                    display: inline-block;
                    font-weight: 600;
                    width: 80px;
                    height: 40px;
                    text-align: center;
                    line-height: 40px;
                    color: #fff;
                }
            }

        }
    }
    .news_txt{
      margin-top: 10px;
    }
  }
}
.page{
    display: flex;
    justify-content: flex-end;
}

</style>
